<template>
    <div style="padding-bottom: 12px">
        <flexbox justify="flex-end" class="margin-b-8">
            <a-button type="primary" @click="handleOpenWorkListModal">关联工单</a-button>
        </flexbox>
        <a-table rowKey="id" size="small" :columns="tableColumns" :data-source="firstList" :pagination="false">
            <template #planChangeStartTime="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
            <template #orderResultTime="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
            <template #action="{ record }">
                <a @click="handleRemove(record)">移除</a>
            </template>
        </a-table>
        <div v-if="historyList.length">
            <a-divider><span class="primary-color">以下为历史工单</span></a-divider>
            <a-table rowKey="id" size="small" :columns="tableColumns" :data-source="historyList" :pagination="false">
                <template #planChangeStartTime="{ text }">
                    {{ $filters.dateFilter(text) }}
                </template>
                <template #orderResultTime="{ text }">
                    {{ $filters.dateFilter(text) }}
                </template>
                <template #action="{ record }">
                    <a @click="handleRemove(record)">移除</a>
                </template>
            </a-table>
        </div>

        <WorkListModal ref="WorkListModalRef" :detail="detail" @success="getList" />
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { useMessage } from '@/hooks/common/useMessage';
import { message } from 'ant-design-vue/es';
import WorkListModal from './components/WorkListModal.vue';
import { defineComponent, ref, unref, reactive, toRefs } from 'vue';
export default defineComponent({
    components: {
        WorkListModal
    },
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const WorkListModalRef = ref<any>();
        const tableColumns: Recordable[] = [
            {
                title: '所属产品',
                dataIndex: 'involveSystem'
            },
            {
                title: '工单编号',
                dataIndex: 'orderNumber'
            },
            {
                title: '变更名称',
                dataIndex: 'changeName'
            },
            {
                title: '工单状态',
                dataIndex: 'orderStatus'
            },
            {
                title: '变更申请人',
                dataIndex: 'changeApplicant'
            },
            {
                title: '变更类型',
                dataIndex: 'changeType'
            },
            {
                title: '计划变更开始时间',
                dataIndex: 'planChangeStartTime',
                slots: { customRender: 'planChangeStartTime' }
            },
            {
                title: '工单结束时间',
                dataIndex: 'orderResultTime',
                slots: { customRender: 'orderResultTime' }
            },
            {
                title: '变更级别',
                dataIndex: 'changeLevel'
            },
            {
                title: '变更关闭结果',
                dataIndex: 'closeResult'
            },
            {
                title: '操作',
                key: 'action',
                width: 100,
                slots: { customRender: 'action' }
            }
        ];
        const state = reactive<any>({
            isCanFinish: false,
            list: [],
            firstList: [],
            historyList: []
        });
        const handleOpenWorkListModal = () => {
            unref(WorkListModalRef).open();
        };
        const getList = async () => {
            const query = {
                versionId: props.detail.id
            };
            const { success, moule, errorMsg } = await api.changeOrderModel.getOrderDataByVersionId(query);
            if (success) {
                state.list = [...moule];
                state.firstList = moule.length ? moule.slice(0, 1) : [];
                // 工单状态是已关闭且变更关闭结果是已成功
                state.isCanFinish = state.list.length ? state.list[0].orderStatus === '已关闭' && state.list[0].closeResult === '成功' : false;
                state.historyList = state.list.length > 1 ? state.list.slice(1) : [];
            } else {
                message.error(errorMsg);
            }
        };
        const handleRemove = (record) => {
            const { createConfirm } = useMessage();
            createConfirm({
                title: `确认移除【${record.changeName}】?`,
                iconType: 'danger',
                onOk: async () => {
                    const query = {
                        orderNumber: record.orderNumber,
                        versionId: props.detail.id
                    };
                    const { success, errorMsg } = await api.changeOrderModel.deleteByOrderNumber(query);
                    if (success) {
                        message.success('删除成功');
                        getList && getList();
                    } else {
                        message.error(errorMsg);
                    }
                }
            });
        };
        getList();
        return {
            tableColumns,
            WorkListModalRef,
            ...toRefs(state),
            handleOpenWorkListModal,
            getList,
            handleRemove
        };
    }
});
</script>

<style scoped lang="less">
</style>